var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal', // 垂直切换选项
    loop: true, // 循环模式选项
    autoplay: {
  delay: 1000,//1秒切换一次
},
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
      clickable :true,
    },
  })
  //获取大盒子对象
var box=document.querySelector('.row')
//获取分页器盒子
var pag=document.querySelector('.pagination');

//通过ajax对象获取数据库中的数据信息
show()
async function show(){
    //获取所有数据
    var ar1=await PromiseAjax({
        url:'../php/list.php',
        datatype:'json'//返回的数据格式为json对象
    })
    //准备分页器的参数
    var obj={
        pageInfo:{
            pagenum:1,
            pagesize:20,
            totalsize:ar1.length,
            totalpage:Math.ceil(ar1.length/20)
        },
        textInfo:{
            first:"首页",
            prev:'上一页',
            next:"下一页",
            last:"尾页"
        }
    }
    //创建分页器对象
    new Pagination(pag,obj,(m)=>{
        //获取一页显示的数据
        var arr=ar1.slice((m-1)*20,m*20)
        //创建字符串，拼接所有内容
        var str=''
        //遍历数组对象
        for(var i=0;i<arr.length;i++){
            str+=`
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail" style="border:none;">
                
                <img src="${arr[i].goods_small_logo}" width="200px">
                <ol class="breadcrumb">
                    <li class="active">${arr[i].cat_three_id}</li>
                </ol> 
                <div class="caption">
                    <h4>${arr[i].goods_name}</h4>
                    <p class="prices" style="font-size: 36px;">￥${arr[i].goods_price}</p>
                    <p>
                        <a href="./cart.html" class="btn btn-primary" role="button">进入购物车</a> 
                        <a href="./xiangqing.html?id=${arr[i].goods_id}" class="btn btn-default" role="button">查看商品详情</a></p>
                </div>
                </div>
            </div>
            `
        }
        //把拼接好的内容，渲染到box盒子中
        box.innerHTML=str
    })
}
var ho= document.querySelector(".header3")
var h1=document.querySelector(".header2")
h1.onmouseover=function(){
    ho.style.display="block"
    console.log(2);

}
h1.onmouseout=function(){
    ho.style.display="none"
    console.log(3);
}

